.practice-side {
  @extend %box-radius;

  background: $c-primary;
  color: $c-primary-over;
  text-align: center;
  padding: 1.2em;
  align-self: start;

  h1 {
    font-size: 3.3em;
    margin: 0.2em;
  }

  h2 {
    font-size: 1.3em;
    margin-bottom: 1em;
  }

  @keyframes fat-glide {
    50% {
      opacity: 1;
    }
  }

  .fat {
    display: block;
    width: 16em;
    height: 16em;
    background: url(../images/practice/robot-golem.svg);
    margin: auto;
    opacity: 0.8;
    animation: 1.2s fat-glide ease-in-out infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    .fat {
      animation: none;
      opacity: 0.8;
    }
  }

  .progress {
    @extend %box-radius-force;

    position: relative;
    width: 100%;
    height: 2em;
    background: mix($c-font-clear, $c-primary, 10%);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
  }

  @keyframes animatedBackground {
    from {
      background-position: 0 0;
    }

    to {
      background-position: 0 1000%;
    }
  }

  @keyframes animatedBar {
    from {
      transform: translateX(-100px);
    }

    to {
      transform: translateX(0px);
    }
  }

  .progress .bar {
    @extend %box-radius-right;

    height: 100%;
    background: mix($c-font-clearer, $c-primary, 25%);
    background-image: img-url('grain.png');
    transform: translateX(-100px);
    animation: animatedBackground 50s linear infinite, animatedBar 1s forwards;
  }

  .progress .text {
    @extend %abs-100;

    line-height: 2em;
    z-index: 1;
  }

  form {
    padding: 1em 0;
    text-align: left;
  }

  a {
    opacity: 0.6;
    color: #fff;
  }

  a:hover {
    opacity: 1;
  }
}
